<template>
  <div class="management-container">
    <!-- 页面标题和操作区 -->
    <div class="page-header">
      <div class="header-title">
        <h1>用户管理</h1>
        <p>管理系统用户信息、角色分配和状态控制</p>
      </div>

      <div class="header-actions">
        <a-flex gap="middle">
            <a-input-search
              placeholder="搜索用户名、邮箱或手机号"
              v-model:value="state.searchKeyword"
              @search="handleSearch"
              enter-button
            />
            <a-select
              placeholder="选择角色"
              v-model:value="state.selectedRole"
              allow-clear
              @change="handleFilter"
            >
            <a-select-option value="">全部角色</a-select-option>
              <a-select-option
                v-for="role in state.allRoles"
                :key="role.id"
                :value="role.id"
              >
                {{ role.name }}
              </a-select-option>
            </a-select>
            <a-select
              placeholder="用户状态"
              v-model:value="state.selectedActive"
              allow-clear
              @change="handleFilter"
            >
              <a-select-option value="">全部状态</a-select-option>
              <a-select-option :value="true">启用</a-select-option>
              <a-select-option :value="false">禁用</a-select-option>
            </a-select>

            <a-button type="primary" @click="openAddUserModal">
              <PlusOutlined /> 新增
            </a-button>
            <a-button @click="handleBatchImport">
              <ImportOutlined /> 导入
            </a-button>
            <a-button @click="handleExport">
              <ToTopOutlined /> 导出
            </a-button>
        </a-flex>
        
      </div>
    </div>

    <!-- 统计卡片 -->
    <a-row :gutter="16" class="stat-cards">
      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p>总用户数</p>
              <h3>{{ state.totalUsers }}</h3>
            </div>
            <div class="stat-icon total">
              <UserOutlined />
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p>活跃用户</p>
              <h3>{{ state.activeUsers }}</h3>
            </div>
            <div class="stat-icon active">
              <CheckCircleOutlined />
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p>今日新增</p>
              <h3>{{ state.todayNewUsers }}</h3>
            </div>
            <div class="stat-icon new">
              <PlusCircleOutlined />
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <p>待审核</p>
              <h3>{{ state.pendingUsers }}</h3>
            </div>
            <div class="stat-icon pending">
              <ClockCircleOutlined />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 用户列表表格 -->
    <a-card class="user-table-card">
      <div class="table-operations">
        <a-checkbox
          v-model:checked="state.selectAll"
          @change="handleSelectAllChange"
        >
          全选
        </a-checkbox>

        <a-button
          type="primary"
          v-if="state.selectedRowKeys.length > 0"
          @click="handleBatchChangeStatus"
          style="margin-left: 16px"
        >
          {{ batchStatusText }}
        </a-button>

        <a-button
          danger
          v-if="state.selectedRowKeys.length > 0"
          @click="handleBatchDelete"
          style="margin-left: 8px"
        >
          批量删除
        </a-button>
      </div>

      <a-table
        :columns="columns"
        :data-source="state.filteredUsers"
        :row-key="(record) => record.id"
        :pagination="state.pagination"
        :loading="state.tableLoading"
        :row-selection="{
          selectedRowKeys: state.selectedRowKeys,
          onChange: handleRowSelectionChange,
          getCheckboxProps: getCheckboxProps,
        }"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <!-- 头像列 -->
          <a-avatar
            :src="record.avatar"
            :alt="record.name"
            v-if="column.dataIndex === 'avatar'"
          >
            {{ record.name }}
          </a-avatar>
          <div class="" v-if="column.key === 'createdAt'">
            {{ formatDateTime(record.createdAt) }}
          </div>
          <!-- 状态列 -->
          <a-badge
            v-if="column.dataIndex === 'activeName'"
            :status="record.active === true ? 'success' : 'error'"
            :text="record.activeName"
          />
          <!-- 操作列 -->
          <div class="table-actions" v-if="column.dataIndex === 'actions'">
            <a-flex :gap="5">
              <a-button
                type="primary"
                shape="circle"
                @click="handleEditUser(record)"
              >
                <template #icon>
                  <EditOutlined />
                </template>
              </a-button>
              
              <a-popconfirm
                title="确定删除该用户吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="handleDeleteUser($event, record)"
                :disabled="record.email === 'admin'"
              >
                <a-button
                type="primary"
                ghost
                danger
                shape="circle"
                :disabled="record.email === 'admin'"
              >
                <template #icon>
                  <ClearOutlined />
                </template>
              </a-button>
              </a-popconfirm>
            </a-flex>
          </div>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑用户模态框 -->
    <a-modal
      :title="state.userModal.title"
      :open="state.userModal.visible"
      :confirm-loading="state.userModal.loading"
      :maskClosable="false"
      @cancel="closeUserModal"
      @ok="handleSaveUser"
      cancelText="取消"
      okText="确定"
    >
      <a-form
        :model="state.userForm"
        :rules="state.formRules"
        ref="userFormRef"
        layout="vertical"
      >
        <a-form-item name="name" label="用户名" :has-feedback="true">
          <a-input
            v-model:value="state.userForm.name"
            placeholder="请输入用户名"
          />
        </a-form-item>

        <a-form-item
          name="password"
          label="密码"
          :has-feedback="true"
          :hidden="state.userModal.type === 'edit'"
          v-if="state.userModal.type === 'add'"
        >
          <a-input-password
            v-model:value="state.userForm.password"
            placeholder="请输入密码"
          />
        </a-form-item>

        <a-form-item name="email" label="邮箱" :has-feedback="true">
          <a-input
            v-model:value="state.userForm.email"
            placeholder="请输入邮箱"
            :disabled="state.userModal.type === 'edit'"
          />
        </a-form-item>

        <a-form-item name="phone" label="手机号" :has-feedback="true">
          <a-input
            v-model:value="state.userForm.phone"
            placeholder="请输入手机号"
          />
        </a-form-item>

        <a-form-item name="role" label="角色">
          <a-select
            v-model:value="state.userForm.role"
            placeholder="请选择角色"
            :disabled="state.userForm.email == 'admin'"
          >
            <a-select-option v-for="role in state.allRoles" :key="role.id" :value="role.id">
              {{ role.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item name="active" label="状态"
         :rules="[{ required: true }]">
          <a-radio-group v-model:value="state.userForm.active" :disabled="state.userForm.email == 'admin'">
            <a-radio :value="true">启用</a-radio>
            <a-radio :value="false">禁用</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item name="remark" label="备注">
          <a-textarea
            v-model:value="state.userForm.remark"
            placeholder="请输入备注信息"
            :rows="3"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 批量导入模态框 -->
    <a-modal
      title="批量导入用户"
      :open="state.importModalVisible"
      :confirm-loading="state.importModalLoading"
      @cancel="closeImportModal"
      @ok="handleConfirmImport"
      okText="导入"
      cancelText="取消"
    >
      <div class="import-modal-content">
        <p>请上传符合格式的Excel文件进行批量导入</p>
        <a-upload
          v-model:fileList="state.importFileList"
          :before-upload="beforeUpload"
          :max-count="1"
          name="file" 
          accept=".xlsx,.xls"
        >
          <a-button> <UploadOutlined /> 选择文件 </a-button>
        </a-upload>
        <p class="import-hint">
          <InfoCircleOutlined />
          <a href="/src/assets/import_template.xlsx" @click="handleDownloadTemplate">下载导入模板</a>
        </p>
      </div>
    </a-modal>

    
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { message, Modal } from "ant-design-vue";
import {
  EditOutlined,
  ClearOutlined,
  UploadOutlined,
  InfoCircleOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  UserOutlined,
  PlusOutlined,
  ImportOutlined,
  ToTopOutlined,
  PlusCircleOutlined
} from "@ant-design/icons-vue";
import { getUsers, deleteUser, addUser, updateUser,batchUpdateUser, batchAddUser, batchDeleteUser } from "@/api/user";
import api from "@/api";
import { getRoles } from "@/api/role";
import { formatDateTime,exportTableToExcel } from "@/utils";



// 响应式状态管理
const state = reactive({
  // 用户数据
  users: [],
  filteredUsers: [],
  totalUsers: 0,

  // 统计数据
  activeUsers: 0,
  todayNewUsers: 0,
  pendingUsers: 0,

  // 搜索和筛选条件
  searchKeyword: "",
  selectedRole: "",
  selectedActive: "",

  // 表格状态
  tableLoading: false,
  pagination: {
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: false,
    showTotal: (total) => `共 ${total} 条记录`,
    onChange: (page, pageSize) => {
      state.pagination.current = page;
      state.pagination.pageSize = pageSize;
      fetchUsers(page);
    },

  },

  // 表格选择
  selectedRowKeys: [],
  selectAll: false,

  // 角色和部门列表
  allRoles:[],

  // 用户表单模态框
  userModal: {
    visible: false,
    loading: false,
    title: "新增用户",
    type: "add", // add 或 edit
  },

  // 用户表单数据
  userForm: {
    id: "",
    name: "",
    password: "",
    email: "",
    phone: "",
    role: "",
    active: true,
    remark: "",
  },

  // 表单验证规则
  formRules: {
    name: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      {
        min: 3,
        max: 20,
        message: "用户名长度在 3 到 20 个字符",
        trigger: "blur",
      },
    ],
    password: [
      { required: true, message: "请输入密码", trigger: "blur" },
      {
        min: 6,
        max: 20,
        message: "密码长度在 6 到 20 个字符",
        trigger: "blur",
      },
    ],
    email: [
       
      // admin 就不检测邮箱格式了
      {
        validator: (rule, value, callback) => {
          if (state.userForm.email === 'admin') {
            callback();
          } else {
            if (!value) {
              callback(new Error("请输入邮箱"));
            } else if (!/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(value)) {
              callback(new Error("请输入正确的邮箱格式"));
            } else {
              callback();
            }
          }
        },
        trigger: "blur",
      },{ required: true, message: "请输入邮箱", trigger: "blur" },
    ],
    phone: [
      { required: true, message: "请输入手机号", trigger: "blur" },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号格式",
        trigger: "blur",
      },
    ],
    role: [{ required: true, message: "请选择角色", trigger: "change" }],
  },


  // 批量导入相关
  importModalVisible: false,
  importModalLoading: false,
  importFileList: [],
});
// 表格列定义
const columns = [
  {
    title: "头像",
    dataIndex: "avatar",
    key: "avatar",
    width: 80,
  },
  {
    title: "用户名",
    dataIndex: "name",
    key: "name",
    ellipsis: true,
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email",
    ellipsis: true,
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
    ellipsis: true,
  },
  {
    title: "角色",
    dataIndex: "roleName",
    key: "roleName",
    // filters: state.allRoles.map((role) => ({ text: role.name, value: role.id })),
    // onFilter: (value, record) => record.role === value,
  },
  {
    title: "状态",
    dataIndex: "activeName",
    key: "activeName",
    width: 100,
  },
  {
    title: "注册时间",
    dataIndex: "createdAt",
    key: "createdAt",
    sorter: (a, b) => new Date(a.createdAt) - new Date(b.createdAt),
  },
  {
    title: "操作",
    dataIndex: "actions",
    key: "actions",
    width: 100,
    fixed: "right",
  },
];
// 表单引用
const userFormRef = ref(null);

// 计算属性 - 批量操作状态文本
const batchStatusText = computed(() => {
  // 检查选中的用户是否都为同一状态
  if (state.selectedRowKeys.length === 0) return "修改状态";

  const firstStatus = state.users.find(
    (u) => u.id === state.selectedRowKeys[0]
  ).active;
  const allSameStatus = state.selectedRowKeys.every(
    (id) => state.users.find((u) => u.id === id).active === firstStatus
  );

  return allSameStatus
    ? firstStatus === true
      ? "批量禁用"
      : "批量启用"
    : "修改状态";
});

// 初始化
onMounted(() => {
  fetchUsers();
  fetchRoles();
});

// 加载用户数据
const fetchUsers = async (current = state.pagination.current) => {
  state.tableLoading = true;

  getUsers({
    page: current,
    pageSize: state.pagination.pageSize,
    searchKey: state.searchKeyword,
  }).then(res => {
    const list = res.list.map(item => {
      item.createdAt = formatDateTime(item.createdAt)
      item.activeName = item.active === true ? '启用' : '禁用'
      return item
    })
    state.users = list;
    state.filteredUsers = list;
    state.totalUsers = res.total;
    state.pagination.total = res.total;
  }).finally(() => {
    state.tableLoading = false;
  });
};
const fetchRoles = () => {
  getRoles({
    all:1
  }).then(res => {
    state.allRoles = res.lists
  })
}

// 搜索和筛选用户
const handleSearch = () => {
 console.log(state.searchKeyword)
  // 关键词搜索
  if (state.searchKeyword) {
    state.searchKeyword = state.searchKeyword.toLowerCase();
    state.selectedRole = ""
    state.selectedActive = ""
  }
   fetchUsers(1)
}

const handleFilter = () => {
  let result = [...state.users];
  // 角色筛选
  if (state.selectedRole) {
    result = result.filter((user) => user.role === state.selectedRole);
  }

  // 状态筛选
  if (state.selectedActive !== "") {
    result = result.filter(
      (user) => user.active === (state.selectedActive === true)
    );
  }

  state.filteredUsers = result;
  state.pagination.total = result.length;
};

// 表格分页、排序、筛选变化
const handleTableChange = (pagination, filters, sorter) => {
  console.log(pagination, filters, sorter)
  state.selectedRowKeys = []
  state.selectAll = false
  state.pagination = { ...state.pagination, ...pagination };

  // // 处理筛选
  // if (Object.keys(filters).length > 0) {
  //   let result = [...state.users];

  //   // 角色筛选
  //   if (filters.role && filters.role.length > 0) {
  //     result = result.filter((user) => filters.role.includes(user.role));
  //   }

    

  //   state.filteredUsers = result;
  //   state.pagination.total = result.length;
  // } else {
  //   handleSearch();
  // }
};

// 全选变化
const handleSelectAllChange = (e) => {
  if (e.target.checked) {
    state.selectedRowKeys = state.filteredUsers.filter((user) => user.email!== "admin").map((user)=>user.id);
  } else {
    state.selectedRowKeys = [];
  }

};

// 行选择变化
const handleRowSelectionChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
  state.selectAll =
    selectedRowKeys.length === state.filteredUsers.length &&
    selectedRowKeys.length > 0;
};

// 选择框属性设置
const getCheckboxProps = (record) => ({
  disabled: record.email === "admin", // 超级管理员不可选
  record,
});

// 打开新增用户模态框
const openAddUserModal = () => {
  state.userModal = {
    visible: true,
    loading: false,
    title: "新增用户",
    type: "add",
  };

  // 重置表单
  resetUserForm();
};

// 打开编辑用户模态框
const handleEditUser = (record) => {
  state.userModal = {
    visible: true,
    loading: false,
    title: "编辑用户",
    type: "edit",
  };

  // 填充表单数据
  state.userForm = {
    id: record.id,
    name: record.name,
    password: "", // 编辑时不显示密码
    email: record.email,
    phone: record.phone,
    role: record.role,
    active: record.active,
    remark: record.remark,
  };
};

// 关闭用户模态框
const closeUserModal = () => {
  state.userModal.visible = false;
  state.userModal.loading = false;
};

// 重置用户表单
const resetUserForm = () => {
  if (userFormRef.value) {
    userFormRef.value.resetFields();
  }

  state.userForm = {
    id: "",
    name: "",
    password: "",
    email: "",
    phone: "",
    role: "",
    active: true,
    remark: "",
  };
};

// 保存用户（新增或编辑）
const handleSaveUser = async () => {
  if (!userFormRef.value) return;

  try {
    // 表单验证
    await userFormRef.value.validate();
    state.userModal.loading = true;
    if(state.userModal.type === "add") {
      await addUser({
        ...state.userForm
      })
      message.success("用户创建成功");
    }else{
      // 编辑用户
      await updateUser(state.userForm.id,state.userForm)
      message.success("用户更新成功");
    }
      updateStatistics();
      handleSearch();
      // 关闭模态框
      closeUserModal();
    
  } catch (error) {
    console.error("表单验证失败:", error);
  } finally {
    state.userModal.loading = false;

  }
};


// 更改用户状态
const handleChangeStatus = (record) => {
  const newStatus = record.active === true ? false : true;
  const statusText = newStatus === true ? "启用" : "禁用";

  state.tableLoading = true;

  // 模拟API请求
  // setTimeout(() => {
  //   const index = state.users.findIndex((user) => user.id === record.id);
  //   if (index !== -1) {
  //     state.users[index].status = newStatus;
  //     message.success(`用户已${statusText}`);

  //     // 更新列表和统计数据
  //     handleSearch();
  //     updateStatistics();
  //   }

  //   state.tableLoading = false;
  // }, 500);
};

// 批量更改状态
const handleBatchChangeStatus = async () => {
  // 确定目标状态（如果全是启用则禁用，全是禁用则启用，混合则提示）
  const statuses = state.selectedRowKeys.map(
    (id) => state.users.find((user) => user.id === id).active
  );

  const allEnabled = statuses.every((active) => active === true);
  const allDisabled = statuses.every((active) => active === false);

  if (!allEnabled && !allDisabled) {
    message.warning("请选择状态一致的用户进行批量操作");
    return;
  }

  const newStatus = allEnabled ? false : true;
  const statusText = newStatus === true ? "启用" : "禁用";

  state.tableLoading = true;
   Modal.confirm({
      content: `确定要${statusText}选中的 ${state.selectedRowKeys.length} 个用户吗？`,
      okText: "确认",
      cancelText: "取消",
      onOk: async () => {
        try {
          await batchUpdateUser({
            ids:state.selectedRowKeys,
            updateType:'active',
            updateValue:newStatus
          });
          message.success(
            `已${statusText}选中的 ${state.selectedRowKeys.length} 个用户`
          );
          // 重置选择
          state.selectedRowKeys = [];
          state.selectAll = false;
          updateStatistics();
          handleSearch();
        } catch (error) {
          console.error("批量更改状态失败:", error);
          message.error("批量更改状态失败");
        }finally {
          state.tableLoading = false;
        }
      },
    });
};

// 删除用户
const handleDeleteUser = async (e,record) => {
  console.log(api)
  if (record.email === "admin") {
    message.error("超级管理员不能删除");
    return;
  }
  e.stopPropagation();
  try {
    state.tableLoading = true;
    await deleteUser(record.id)
    message.success("用户删除成功");
    handleSearch();
    updateStatistics();
    await fetchUsers()
  } catch (error) {
    console.error("删除用户失败:", error);
    message.error("删除用户失败");
  } finally {
    state.tableLoading = false;
  }
};

// 批量删除用户
const handleBatchDelete = () => {
  // 检查是否包含超级管理员
  const hasAdmin = state.selectedRowKeys.some(
    (id) => state.users.find((user) => user.id === id).email === "admin"
  );

  if (hasAdmin) {
    message.error("超级管理员不能删除");
    return;
  }
console.log(state.selectedRowKeys)
  // 确认删除
  Modal.confirm({
    content: `确定要删除选中的 ${state.selectedRowKeys.length} 个用户吗？`,
    okText: "确认",
    cancelText: "取消",
    onOk: async () => {
      state.tableLoading = true;
      try {
        await batchDeleteUser(state.selectedRowKeys)
        
        message.success(`已删除 ${state.selectedRowKeys.length} 个用户`);
        state.selectAll = false;
        state.selectedRowKeys = [];
        // 更新列表和统计数据
        handleSearch();
        updateStatistics();
      } catch (error) {
        console.error("删除用户失败:", error);
        message.error("删除用户失败");
      } finally {
        state.tableLoading = false;
      }
    },
  });
};

// 打开批量导入模态框
const handleBatchImport = () => {
  state.importModalVisible = true;
  state.importFileList = [];
  state.importModalLoading = false;
};

// 关闭批量导入模态框
const closeImportModal = () => {
  state.importModalVisible = false;
  state.importFileList = [];
  state.importModalLoading = false;
};

// 上传前检查
const beforeUpload = (file) => {
  const isExcel =
    file.type ===
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
    file.type === "application/vnd.ms-excel";

  if (!isExcel) {
    message.error("请上传Excel文件（.xlsx 或 .xls）");
    return false;
  }

  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error("文件大小不能超过10MB");
    return false;
  }

  return false;
};

// 确认导入
const handleConfirmImport = async () => {
  if (state.importFileList.length === 0) {
    message.warning("请选择要导入的文件");
    return;
  }

  state.importModalLoading = true;
  try {
    const formData = new FormData()
    formData.append('file', state.importFileList[0].originFileObj)
    formData.append('filename', state.importFileList[0].name)
    const filePath = await api.uploadFile(formData)
    await batchAddUser({
      filePath
    })
    message.success("导入成功");
    closeImportModal();
    updateStatistics();
    handleSearch();
  } catch (error) {} finally {
    state.importModalLoading = false;
  }
};

// 下载导入模板
const handleDownloadTemplate = () => {
  message.success("模板下载中...");
};

// 导出用户数据
const handleExport = () => {
  state.tableLoading = true;
  const newColumns = columns.filter((column) => {
    return column.dataIndex !== 'actions' && column.dataIndex !== 'avatar'
  })
  exportTableToExcel(state.filteredUsers, newColumns, '用户信息表');
  // 模拟导出过程
  setTimeout(() => {
    message.success(`导出成功，共导出${state.filteredUsers.length}条用户数据`);
    state.tableLoading = false;
  }, 800);
};

// 更新统计数据
const updateStatistics = async () => {
  await fetchUsers()
  state.activeUsers = state.users.filter((user) => user.active === true).length;
  state.pagination.total = state.totalUsers
};
</script>

<style lang="scss" scoped>
.management-container {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.header-title h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.header-title p {
  color: #666;
  margin-bottom: 16px;
}

.stat-cards {
  margin-bottom: 24px;
}

.stat-card {
  overflow: hidden;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.stat-info p {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-info h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-icon.total {
  background-color: #e6f7ff;
  color: #1890ff;
}

.stat-icon.active {
  background-color: #f6ffed;
  color: #52c41a;
}

.stat-icon.new {
  background-color: #fff0f0;
  color: #f5222d;
}

.stat-icon.pending {
  background-color: #fff7e6;
  color: #faad14;
}

.user-table-card {
  margin-bottom: 24px;
}

.table-operations {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.table-actions {
  display: flex;
  gap: 8px;
}

.user-detail {
  padding: 16px 0;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.user-basic-info {
  margin-left: 16px;
}

.user-basic-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

.user-basic-info p {
  margin: 0 0 8px 0;
  color: #666;
}

.detail-section {
  margin-bottom: 16px;
}

.detail-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}

.import-modal-content {
  padding: 16px 0;
}

.import-hint {
  margin-top: 16px;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.import-hint a {
  margin-left: 8px;
  color: #1890ff;
}
</style>
